<template>
    <view class="page_main">
        <HeaderBar title="账单详情"></HeaderBar>
        <view class="container">
            <view class="header">
                <view class="icon">
                    退<text>￥</text>
                </view>
                <view class="price">
                    ￥<text class="num">{{refundDetail.refundAmount?.toFixed(2)}}</text>
                </view>
                <view class="name">
                    {{refundDetail.productName}}
                </view>       
            </view>
            <!-- 退款信息 -->
            <wd-collapse viewmore v-model="collapseRoot" @change="handleChange" :line-num="3"  use-more-slot custom-more-slot-class="more-slot">
                <view class="order_list">
                    <view class="order_label">申请退款金额</view>
                    <view class="info">{{refundDetail.refundAmount?.toFixed(2)}}</view>
                </view>
                <view class="order_list">
                    <view class="order_label">退款原因</view>
                    <view class="info">{{refundDetail.refundAmount?.toFixed(2)}}</view>
                </view>
                <view class="order_list">
                    <view class="order_label">退款至</view>
                    <view class="info">原支付账户</view>
                </view>
                <view class="order_list">
                    <view class="order_label">退款单号</view>
                    <view class="info">{{refundDetail.refundId}}</view>
                </view>
                <view class="order_list">
                    <view class="order_label">退款人</view>
                    <view class="info">{{refundDetail.refundId}}</view>
                </view>
                <template class="more" #more>
                    <view class="more_i" v-if="!collapseRoot">查看更多<uni-icons type="down" size="18"></uni-icons></view>
                    <view class="more_i" v-else>点击收起<uni-icons type="up" size="18"></uni-icons></view>
                </template>
            </wd-collapse>  
            <!-- 退款进度 -->
            <view class="steps">
                <view class="title">退款进度</view>
                <wd-steps :active="activeIndex" vertical class="reverse-steps">
                    <wd-step title="审核中" v-if="refundDetail.refundStatus ===1">
                    <!-- <wd-step title="审核中" > -->
                        <template #icon >
                            <wd-icon name="chart-pie" size="20px"></wd-icon>
                        </template>
                        <template #description>
                            <view class="desc">{{ refundDetail.memo }}</view>
                            <view class="time">{{ refundDetail.updateTime }}</view>
                        </template>
                    </wd-step>
                    <wd-step title="审核通过" status="finished" v-if="refundDetail.refundStatus ===2">
                    <!-- <wd-step title="审核通过" status="finished" > -->
                        <template #icon >
                            <wd-icon name="check-circle-filled" size="22px"></wd-icon>
                        </template>
                        <template #description>
                            <view class="desc">{{ refundDetail.memo }}</view>
                            <view class="time">{{ refundDetail.updateTime }}</view>
                        </template>
                    </wd-step>
                    <wd-step title="审核未通过" status="error" v-if="refundDetail.refundStatus ===3">
                    <!-- <wd-step title="审核未通过" status="error" > -->
                        <template #icon >
                            <wd-icon name="close-circle" size="22px"></wd-icon>
                        </template>
                        <template #description>
                            <view class="desc">{{ refundDetail.memo }}</view>
                            <view class="time">{{ refundDetail.updateTime }}</view>
                        </template>
                    </wd-step>
                    <wd-step title="提交申请" status="finished">
                        <template #icon >
                            <wd-icon name="check-circle-filled" size="22px"></wd-icon>
                        </template>
                        <template #description>
                            <view class="desc">{{ refundDetail.memo }}</view>
                            <view class="time">{{ refundDetail.createTime }}</view>
                        </template>
                    </wd-step>
                </wd-steps>
            </view>
               
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, onMounted , computed, reactive } from 'vue'
import HeaderBar from "@/components/HeaderBar/index.vue";
import {onLoad} from "@dcloudio/uni-app";
import { orderRefundQuery ,refundOrderInfo } from "@/premiumRouteSubPack/api/index";

const collapseRoot = ref()  //订单信息展开状态
const activeIndex = ref()  //
// 状态映射表
// const statusTitles = {
//   0: '提交申请',
//   1: '审核中',
//   2: '审核通过',
//   3: '审核未通过'
// }
const refundDetail = reactive({
  createTime: "2025-04-30T19:16:01",
    merchantId: null,
    merchantName: "阳光旅行社",
    orderId: "P2504300000000000010",
    orderType: null,
    productDescribed: null,
    productId: null,
    productName: null,
    refundAmount: 0.01,
    refundId: "50300902882025043018437714020",
    refundLogs: null,
    refundNumber: null,
    refundStatus: "SUCCESS",
    remark: "平台退款测试",
    updateTime: "2025-04-30T19:16:13",
    userId: 22,
    userType: 1,
})
// // 激活步骤索引
// const activeIndex = computed(() => {
//   return visibleSteps.value.length - 1
// })
onLoad((option) => {
    // 获取页面跳转时传递的参数
    // const id = option.id;
    const id = 'P2504300000000000010';
    // 调用后端接口
    getRefundDetail(id);
});
//获取退款详情
const getRefundDetail =(id) => {
      const myOrderClientRefund = {
          orderId:id,
          orderType:5,
      }
      console.log(myOrderClientRefund,'...........');
      
    refundOrderInfo(myOrderClientRefund).then((res)=>{

        console.log(res,'-------');
    })
};
const handleChange =()=>{
    console.log('展开面板11111');
    
}
</script>

<style lang="scss" scoped>
.page_main{
    height: 100vh;
    background: #eeefe7;
    .container{
        padding: 40rpx 28rpx;
        .header{
            padding: 48rpx 28rpx 67rpx;
            text-align: center;
            background: #fff;
            border-radius: 10rpx;
            border-bottom: 1rpx dashed #c0c2b3;
            .icon{
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                background: #aa5413;
                color: #fff;
                font-size: 36rpx;
                line-height: 70rpx;
                position: relative;
                padding-right: 10rpx;
                box-sizing: border-box;
                margin: 0 auto;
                text{
                    font-size: 20rpx;
                    position: absolute;
                    top: -5rpx;
                }
            }
            .price{
                margin-top: 27rpx;
                .num{
                    font-size: 48rpx;
                    font-weight: bold;
                }
            }
            .name{
                font-size: 30rpx;
                margin-top: 20rpx;
            }
        }
        :deep(.wd-collapse){
            border-radius: 10rpx;
            .order_list{
                position: relative;
                margin-top: 20rpx;
                font-size: 29rpx;
                .order_label{
                    position: absolute;
                    // left: 0;
                    // top:0;
                }
                .info{
                    text-align: right;
                    padding-left: 180rpx;
                }
            }
            .more-slot {
                border-top: 1px solid #c0c2b3;
                width: calc(750rpx - 28rpx*4);
                padding-top: 20rpx;
                margin-top: 20rpx;
                .more_i{
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #2b2b24;
                }
            }
        }
        .steps{
            margin-top: 22rpx;
            background: #fff;
            border-radius: 10rpx;
            padding: 36rpx 28rpx 106rpx;
            .title{
                font-size: 29rpx;
                font-weight: bold;
                margin-bottom: 36rpx;
            }
            :deep(.wd-steps){
                .wd-step__header{
                    color: #2b2b24;
                }
                .wd-step__title{
                    color: #2b2b24;
                }
            }
            :deep(.is-finished){
                .wd-step__header{
                    color: #1B9C61;
                } 
                .wd-step__title{
                    color: #777777;
                }
            }
            :deep(.is-error){
                .wd-step__header{
                    color: #d10606;
                } 
            }
        }
    }
}

</style>